<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <title>客户表</title>
    <script src="../../../static/kaige/js/szload.js"></script>
    <style>
        .layui-table-cell {
            height: auto !important;
        }
    </style>
</head>

<body>
<div class="kaige-body">
    <table class="layui-table" id="pageTable" lay-filter="pageTable" lay-size="sm"></table>
    <input type="hidden" name="keywordsCache" value="{}"/>
</div>

<script src="../../../static/lib/jquery-3.6.0.min.js"></script>
<script>
    let jq = jQuery.noConflict();
    load_init_js([
        szoapcpath + '/static/kaige/js/date.js',
        szoapcpath + '/static/kaige/js/search.js',
        szoapcpath + '/static/kaige/js/xm-select.js'
    ], function () {
        layui.config({
            base: szoapcpath + '/static/kaige/layuiextend/',
            version: Date.now(),
        }).use(['element', 'table', 'form', 'layer', 'kaige', 'laytpl', 'lvybtpl', 'laydate'], function () {
            var element = layui.element,
                layer = layui.layer,
                table = layui.table,
                form = layui.form,
                kaige = layui.kaige,
                lvybtpl = layui.lvybtpl,
                laytpl = layui.laytpl,
                laydate = layui.laydate,
                $ = layui.$;

            window.kaige_page = {
                logout_url: '/index/logout',
                welcome: './pages/welcome.html',
                menus: [],
                leftmenu: [],
            };

            window.pagedict = parent.window.kaige_page.dict || {};

            form.render();

            kaige.table({
                elem: '#pageTable',
                url: "/crm.customer/index",
                id: 'pageTable',
                toolbar: '#dtoolbar',
                defaultToolbar: ['filter'],
                cols: [[
                    {field: 'id', title: '', align: 'center'},
                    {field: 'name', title: '客户名称', align: 'center'},
                    {field: 'subname', title: '助记名称', align: 'center'},
                    {field: 'level', title: '客户星级', align: 'center', templet: "#level_name"},
                    {field: 'belong', title: '客户所属', align: 'center', templet: "#belong_name"},
                    {field: 'source', title: '客户来源', align: 'center', templet: "#source_name"},
                    {field: 'address', title: '省市区ID', align: 'center'},
                    {field: 'address_detail', title: '详细地址', align: 'center'},
                    {field: 'remarks', title: '备注信息', align: 'center'},
                    {field: 'owner_user_name', title: '负责人', align: 'center'},
                    {field: 'create_time', title: '创建时间', align: 'center'},
                    {title: '操作', toolbar: '#dtrbar', align: 'center', width: 150, fixed: 'right'}
                ]]
            });

            //双击点击
            table.on('rowDouble(pageTable)', function (obj) {
                var data = obj.data;
                showDetail(data);
            });

            //列表-监听表头工具栏事件dtoolbar
            table.on('toolbar(pageTable)', function (obj) {
                switch (obj.event) {
                    case 'btn-add':
                        btnadd();
                        break;
                }
            });

            //列表-监听单元格行工具事件dtrbar
            table.on('tool(pageTable)', function (obj) {
                var that = this;
                var data = obj.data;
                switch (obj.event) {
                    case 'edit':
                        baredit(data);
                        break;
                    case 'record':
                        recordEvent(data);
                        break;
                    case 'open':
                        openEvent(data);
                        break;
                    case 'del':
                        bardel(data);
                        break;
                }
            });
            window.recordEvent = function (data) {
                var detailData = {};
                detailData = $.extend(pagedict, data);
                lvybtpl.ajax({
                    jq: jq,
                    type: 'get',
                    url: szoa.client.path + '/pages/crm/customer/record.html',
                    id: 'record',
                    postUrl: '/crm.customer_record/add',
                    detailData: detailData,
                    contentTable: 'contentTable',
                    callafter: function () {
                        laydate.render({
                            elem: '#next_time'
                            , type: 'date'
                        });
                        lvybtpl.xmSelect({
                            url: '/select/Customer',
                            getData: {},
                            id: 'relation_id',
                            values: [],
                        })

                        $('#reminds_name').on('focus', function () { //rece_id_name 要调用的文本框
                            layer.open({
                                title: '选择适用对象',
                                content: szoa.client.path + '/pages/pmm/config/ugdc.html',
                                area: ['690px', '470px'],
                                type: 2,
                                success: function (layero, index) {
                                    window.ugdcinfo = function (opt) {
                                        $('#reminds_name').val(opt.names);
                                        $('#reminds_id').val(opt.ids); // 隐藏的文本框存 id ,部门id(u1,u4),组id(g1,g2),部门根ID（c1,c9)与部门ID区别 根ID需要查找同所有子部门
                                        layer.close(layer.index);
                                    }
                                }
                            });
                        });
                    }
                })
            }


            window.showDetail = function (e) {
                var detailData = $.extend(pagedict, e);
                lvybtpl.ajaxTab({
                    jq: jq,
                    type: 'get',
                    url: szoa.client.path + '/pages/crm/customer/detail.html',
                    id: 'detail',
                    width: '90%',
                    height: '100%',
                    detailData: detailData,
                    contentTable: 'contentTable',
                    callafter: function () {
                        kaige.table({
                            elem: '#recordTable',
                            url: "/crm.customer_record/index",
                            id: 'recordTable',
                            cols: [[
                                {field: 'follow_type_name', title: '跟进类型', align: 'center'},
                                {field: 'files_id', title: '跟进时间', align: 'center', templet: '#tupian2'},
                                {field: 'follow_name', title: '跟进状态', align: 'center'},
                                {field: 'create_time', title: '跟进内容', align: 'center'},
                                {field: 'next_time', title: '下次跟进时间', align: 'center'},
                            ]],
                            where: {
                                relation_id: e.id,
                            }
                        });

                        //放入公海start
                        window.setOpen = function () {
                            var name = $("#customer_name").val();
                            var id = $("#customer_id").val();
                            layer.confirm('确定将[' + name + ']放入公海？', {
                                title: '<i class="layui-icon layui-icon-delete"></i> 删除确认',
                                btn: ['确认', '取消']
                            }, function () {
                                $.post("/crm.open_customer/set", {id: id}, function (res) {
                                    res.status && table.reload('contentTable');
                                    layer.msg(res.msg);
                                });
                            });
                        }
                        //放入公海end
                        var customer_id = $("#customer_id").val();
                        var customer_name = $("#customer_name").val();
                        //编辑页面start
                        window.editInfo = function () {
                            var res = {};
                            szoa.get('/crm.customer/edit', {id: customer_id}, function (res) {
                                console.log(res);
                                baredit(res.data);
                            })
                        }
                        //编辑页面end

                        //客户转移start
                        window.setMove = function () {
                            var detailData = {id: customer_id};
                            lvybtpl.ajax({
                                jq: jq,
                                type: 'get',
                                url: szoa.client.path + '/pages/crm/customer/move.html',
                                id: 'move',
                                offset: 'c',
                                width: '450px',
                                height: '250px',
                                overflow: true,
                                detailData: detailData,
                                postUrl: '/crm.customer/move',
                                allclose: true,
                                contentTable: 'pageTable',
                                callafter: function () {
                                    lvybtpl.xmSelect({
                                        url: '/select/employee',
                                        getData: {},
                                        id: 'parent_id',
                                        values: [],
                                        disabled: false,
                                    })
                                }
                            })
                        }
                        //客户转移end
                        element.on('tab(tabContent)', function (data) {
                            switch (data.index) {
                                case 2:
                                    kaige.table({
                                        elem: '#contactsTable',
                                        url: "/crm.contacts/index",
                                        id: 'contactsTable',
                                        cols: [[
                                            {field: 'name', title: '姓名', align: 'center', templet: "#name_click"},
                                            {field: 'customer_id_name', title: '所属客户', align: 'center'},
                                            {field: 'subname', title: '简称或尊称', align: 'center'},
                                            {field: 'role', title: '角色', align: 'center', templet: "#role_name"},
                                            {field: 'post', title: '职务', align: 'center'},
                                            {field: 'email', title: '邮箱', align: 'center'},
                                            {field: 'mobile', title: '手机号', align: 'center'},
                                            {field: 'telephone', title: '固定座机', align: 'center'},
                                            {field: 'weichat', title: '微信号', align: 'center'},
                                            {field: 'remarks', title: '备注信息', align: 'center'},
                                        ]],
                                        where: {
                                            customer_id: customer_id,
                                        }
                                    });
                                    break
                            }

                        });

                        //新建跟进start
                        window.showRecord = function () {
                            var detailData = {};
                            detailData = $.extend(pagedict, {
                                relation_id: customer_id,
                                relation_name: customer_name
                            });
                            lvybtpl.ajax({
                                jq: jq,
                                type: 'get',
                                url: szoa.client.path + '/pages/crm/customer/record.html',
                                id: 'record',
                                offset: 'c',
                                width: '90%',
                                height: '100%',
                                detailData: detailData,
                                postUrl: '/crm.customer_record/add',
                                contentTable: 'recordTable',
                                callafter: function () {
                                    laydate.render({
                                        elem: '#next_time'
                                        , type: 'date'
                                    });
                                    lvybtpl.xmSelect({
                                        url: '/select/Customer',
                                        getData: {},
                                        id: 'relation_id',
                                        values: [customer_id],
                                        disabled: true,
                                    })

                                    $('#reminds_name').on('focus', function () { //rece_id_name 要调用的文本框
                                        layer.open({
                                            title: '选择适用对象',
                                            content: szoa.client.path + '/pages/pmm/config/ugdc.html',
                                            area: ['690px', '470px'],
                                            type: 2,
                                            success: function (layero, index) {
                                                window.ugdcinfo = function (opt) {
                                                    $('#reminds_name').val(opt.names);
                                                    $('#reminds_id').val(opt.ids); // 隐藏的文本框存 id ,部门id(u1,u4),组id(g1,g2),部门根ID（c1,c9)与部门ID区别 根ID需要查找同所有子部门
                                                    layer.close(layer.index);
                                                }
                                            }
                                        });
                                    });
                                }
                            })
                        }
                        //新建跟进end
                    }
                });
            };

            window.showPage = function () {
                $.get("/crm.customer/show_address", {}, function (res) {
                    var content = $('#address_form_html').html();
                    laytpl(content).render(res.data, function (reshtml) {
                        layer.open({
                            id: 'address_form_box',
                            type: 1,
                            anim: 4,
                            area: ['400px', '100%'],
                            title: "地图",
                            offset: 'r',
                            content: reshtml,
                            btn: ['确定', '取消'],
                            yes: function (index, layero) {
                                layer.close(index);
                            },
                        })
                    })
                })
            }

            //添加
            function btnadd() {
                window.addEventListener('message', function (event) {
                    // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
                    var loc = event.data;
                    if (loc && loc.module == 'locationPicker') {//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
                        $("#address").val(loc.poiaddress);
                        $("#address_detail").val(loc.poiname);
                        $("#lat").val(loc.latlng.lat);
                        $("#lng").val(loc.latlng.lng);
                    }
                }, false);

                kaige.form({
                    url: "/crm.customer/add",
                    data: {},
                    id: 'kaige',
                    area: ['750px', '450px'],
                    title: '<i class="layui-icon layui-icon-add-circle"></i> 添加 - 客户表',
                    tablelayid: 'pageTable',
                    overflow: false,
                    encode: 1,
                    callbefore: function (layero, index) {
                        return false;
                    }
                });
            }

            //编辑
            function baredit(d) {
                window.addEventListener('message', function (event) {
                    // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
                    var loc = event.data;
                    if (loc && loc.module == 'locationPicker') {//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
                        $("#address").val(loc.poiaddress);
                        $("#address_detail").val(loc.poiname);
                        $("#lat").val(loc.latlng.lat);
                        $("#lng").val(loc.latlng.lng);
                    }
                }, false);

                kaige.form({
                    url: "/crm.customer/edit",
                    data: {id: d.id},
                    id: 'kaige',
                    area: ['750px', '450px'],
                    title: '<i class="layui-icon layui-icon-edit"></i> 编辑 - 客户表',
                    tablelayid: 'pageTable',
                    overflow: false,
                    encode: 1,
                    callbefore: function (layero, index) {

                    },
                });
            }

            //删除
            function bardel(d) {
                layer.confirm('您确定删除吗？', {
                    title: '<i class="layui-icon layui-icon-delete"></i> 删除确认',
                    btn: ['确认', '取消']
                }, function () {
                    $.post("/crm.customer/del", {id: d.id}, function (res) {
                        res.status && table.reload('pageTable');
                        layer.msg(res.msg);
                    });
                });
            };

        });
    });
</script>
<script type="text/html" id="dtrbar">
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-xs" lay-event="edit" title="编辑">编辑
        </button>
        <button class="layui-btn layui-btn-xs" lay-event="record" title="跟进">跟进
        </button>
        <button class="layui-btn layui-btn-xs" lay-event="open" title="公海">公海
        </button>
    </div>
</script>
<script type="text/html" id="dtoolbar">
    <div class="layui-btn-container layui-form filter-form" lay-filter="searchform">
        <div class="layui-btn-group">
            <button type="button" class="layui-btn layui-btn-sm" lay-event="btn-add" style="margin-top:2px;"><i
                    class="layui-icon layui-icon-add-circle"></i> 添加
            </button>
        </div>
    </div>
</script>


<script type="text/html" id="level_name">
    {{# for(var ipd in pagedict.clue_level){ }}
    {{# if(d.level ==ipd){ }}
    <span>{{ pagedict.clue_level[ipd] }}</span>
    {{# } }}
    {{# } }}
</script>


<script type="text/html" id="belong_name">
    {{# for(var ipd in pagedict.custome_belong){ }}
    {{# if(d.belong ==ipd){ }}
    <span>{{ pagedict.custome_belong[ipd] }}</span>
    {{# } }}
    {{# } }}
</script>

<script type="text/html" id="source_name">
    {{# for(var ipd in pagedict.clue_source){ }}
    {{# if(d.source ==ipd){ }}
    <span>{{ pagedict.clue_source[ipd] }}</span>
    {{# } }}
    {{# } }}
</script>


<script type="text/html" id="kaige_form_html">
    <form class="layui-form layui-form-pane kaige-body-form" style="padding: 5px;" lay-filter="kaige_form_lay_filter">
        <input type="hidden" name="lng" id="lng" id="lng">
        <input type="hidden" name="lat" id="lat" id="lat">
        {{# if(d.id){ }}
        <input type="hidden" name="id" value="{{ d.id }}"/>
        {{# } }}
        <div class="layui-form-item">
            <label class="layui-form-label">客户名称</label>
            <div class="layui-input-inline">
                <input name="name" value="{{ d.name || '' }}" class="layui-input" type="text">
            </div>
            <label class="layui-form-label">助记名称</label>
            <div class="layui-input-inline">
                <input name="subname" value="{{ d.subname || '' }}" class="layui-input" type="text">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">客户星级</label>
            <div class="layui-input-inline">
                <select name="level" lay-verify="required">
                    {{# lay.each(pagedict.clue_level,function(index,item){
                    if(index == ''){
                    top.layer.msg('系统字典->跟进类型未配置完成，值不能为空');
                    }
                    }}
                    <option value="{{ index }}" {{ d.level== index ?
                    'selected' :'' }}>{{ item }}</option>
                    {{# }) }}
                </select>
            </div>
            <label class="layui-form-label">客户所属</label>
            <div class="layui-input-inline">
                <select name="belong" lay-verify="required">
                    {{# lay.each(pagedict.custome_belong,function(index,item){
                    if(index == ''){
                    top.layer.msg('系统字典->客户所属未配置完成，值不能为空');
                    }
                    }}
                    <option value="{{ index }}" {{ d.belong== index ?
                    'selected' :'' }}>{{ item }}</option>
                    {{# }) }}
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">客户来源</label>
            <div class="layui-input-inline">
                <select name="source" lay-verify="required">
                    {{# lay.each(pagedict.clue_source,function(index,item){
                    if(index == ''){
                    top.layer.msg('系统字典->客户来源未配置完成，值不能为空');
                    }
                    }}
                    <option value="{{ index }}" {{ d.source== index ?
                    'selected' :'' }}>{{ item }}</option>
                    {{# }) }}
                </select>
            </div>
            <label class="layui-form-label">跟进状态</label>
            <div class="layui-input-inline">
                <select name="follow" lay-verify="required">
                    {{# lay.each(pagedict.followStatus,function(index,item){
                    if(index == ''){
                    top.layer.msg('系统字典->客户所属未配置完成，值不能为空');
                    }
                    }}
                    <option value="{{ index }}" {{ d.follow== index ?
                    'selected' :'' }}>{{ item }}</option>
                    {{# }) }}
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注信息</label>
            <div class="layui-input-block">
                <input name="remarks" value="{{ d.remarks || '' }}" class="layui-input" type="text">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">地理位置</label>
            <div class="layui-input-block">
                <input id="address" name="address" value="{{ d.address || '' }}" class="layui-input" type="text"
                       onfocus="showPage();">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">详细地址</label>
            <div class="layui-input-block">
                <input id="address_detail" name="address_detail" value="{{ d.address_detail || '' }}"
                       class="layui-input" type="text">
            </div>
        </div>
        <div class="layui-form-item layui-hide">
            <button class="layui-hide" lay-submit="" id="kaige_form_btn_save" lay-filter="kaige_form_btn_save">保存数据
            </button>
        </div>
    </form>
</script>

<script type="text/html" id="address_form_html">
    <input type="hidden" name="allclose" value="1"/>
    <div style="width: 100%;height: 500px">
        <iframe id="mapPage"
                src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key={{ d.set }}&referer=crm"
                width="100%" height="100%" frameborder="0">
        </iframe>
    </div>
</script>


</body>

</html>